<template>
  <div class="footer">
    <div class="about">
      <a href="/">用户协议</a>
      <span>|</span>
      <a href="/">隐私条款</a>
      <span>|</span>
      <a href="/">网站地图</a>
      <span>|</span>
      <a @mouseenter="appCodeShow" @mouseleave="appCodeHide">客户端</a>
      <span>|</span>
      <p>
        举报邮箱：<a href="mailto:royolefans@royole.com" target="_blank"
          >royolefans@royole.com</a
        >
      </p>
      <span>|</span>
      <p class="fans">
        关注柔宇社区：
        <img
          src="../assets/images/icons/icon_wechat_normal.png"
          alt="WeChat"
          v-if="!wxCodeShowTag"
          @mouseenter="wxCodeShow"
          @mouseleave="wxCodeHide"
        />
        <img
          src="../assets/images/icons/icon_wechat_pressed.png"
          alt="WeChat"
          v-else
          @mouseenter="wxCodeShow"
          @mouseleave="wxCodeHide"
        />
        <img
          src="../assets/images/icons/icon_sina_normal.png"
          alt="sina"
          v-if="!sinaCodeShowTag"
          @mouseenter="sinaCodeShow"
          @mouseleave="sinaCodeHide"
        />
        <img
          src="../assets/images/icons/icon_sina_pressed.png"
          alt="sina"
          v-else
          @mouseenter="sinaCodeShow"
          @mouseleave="sinaCodeHide"
        />
      </p>
      <div class="code" v-if="appCodeShowTag">
        <img src="../assets/images/icons/pic_qr_code.png" alt="CODE" />
        <div>扫一扫下载柔宇社区 APP</div>
      </div>
      <div class="code code-wx" v-if="wxCodeShowTag">
        <img src="../assets/images/icons/pic_qr_code.png" alt="CODE" />
        <div>柔宇社区公众号</div>
      </div>
      <div class="code code-sina" v-if="sinaCodeShowTag">
        <img src="../assets/images/icons/pic_qr_code.png" alt="CODE" />
        <div>柔宇科技微博</div>
      </div>
    </div>
    <div class="info">
      <span>版权所有 © 2020 深圳市柔宇科技股份有限公司 版权所有</span>
      <span>粤ICP备15041489号-1</span>
      <span>备案主体编号：4420191907xxxx</span>
      <img src="../assets/images/icons/icon_notice.png" alt="pla" />
      <span>粤公网安备 44030502004220 号</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // app 二维码状态
      appCodeShowTag: false,
      // wx 二维码状态
      wxCodeShowTag: false,
      // sina 二维码状态
      sinaCodeShowTag: false,
    }
  },
  methods: {
    appCodeShow() {
      this.appCodeShowTag = true
    },
    appCodeHide() {
      this.appCodeShowTag = false
    },
    wxCodeShow() {
      this.wxCodeShowTag = true
    },
    wxCodeHide() {
      this.wxCodeShowTag = false
    },
    sinaCodeShow() {
      this.sinaCodeShowTag = true
    },
    sinaCodeHide() {
      this.sinaCodeShowTag = false
    },
  },
}
</script>

<style lang="scss" scoped>
.footer {
  width: 100%;
  height: 98px;
  margin-top: 20px;
  min-width: 1440px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  .about {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 800px;
    font-family: SourceHanSansSC-Regular;
    font-size: 12px;
    color: #000000;
    font-weight: 400;
    padding-top: 2px;
    position: relative;
    a {
      color: #000000;
      opacity: 0.6;
      cursor: pointer;
      &:hover {
        opacity: 1;
        color: #0050ff;
      }
    }
    p {
      opacity: 0.6;
    }
    span {
      opacity: 0.6;
      margin: 0 15px;
    }
    .fans {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      img {
        width: 21px;
        height: 21px;
        margin: 0 8px;
        cursor: pointer;
      }
    }
    .code {
      position: absolute;
      top: -200px;
      left: 230px;
      width: 166px;
      background: #ffffff;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
      cursor: pointer;
      justify-content: center;
      padding-bottom: 10px;
      img {
        width: 120px;
        height: 120px;
        margin: 23px;
      }
      div {
        opacity: 0.6;
        font-family: SourceHanSansSC-Medium;
        font-size: 12px;
        color: #000000;
        font-weight: 500;
        text-align: center;
        margin-top: -15px;
      }
    }

    .code-wx {
      left: 610px;
    }
    .code-sina {
      left: 645px;
    }
  }
  .info {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    font-family: SourceHanSansSC-Normal;
    font-size: 12px;
    color: #000000;
    line-height: 17px;
    font-weight: 400;
    padding-top: 20px;
    span {
      opacity: 0.6;
      margin: 0 10px;
    }
    img {
      width: 16px;
      height: 16px;
      opacity: 1;
      margin-right: -5px;
    }
  }
}
</style>
